import React, { Component } from "react";
import Walk from "../components/Walk";
import Phone from "../components/Phone";
import "../assets/css/forgotPassword.css";
import { withRouter } from "react-router-dom";
import { errorToast, successToast } from "../components/Toast";
import checkPhone from "../hooks/checkPhone";

class ForgotPassword extends Component {
  constructor(props) {
    super(props);

    this.state = {
      phone: "",
      password: "",
      email: "",
      verify: "",
      isSendVerify:false,
      countDown:60
    };
    this.ChangePhone = this.ChangePhone.bind(this);
    this.ChangePassword = this.ChangePassword.bind(this);
    this.ChangeEmail = this.ChangeEmail.bind(this);
    this.ChangeVerify = this.ChangeVerify.bind(this);
    this.ToLogin = this.ToLogin.bind(this);
    this.GoSubmit = this.GoSubmit.bind(this);
    this.sendVerify = this.sendVerify.bind(this);
  }
  ToLogin() {
    this.props.history.push("/login");
  }
  ChangePhone(e) {
    this.setState({
      phone: e.target.value,
    });
  }
  ChangePassword(e) {
    this.setState({
      password: e.target.value,
    });
  }
  ChangeEmail(e) {
    this.setState({
      email: e.target.value,
    });
  }
  ChangeVerify(e) {
    this.setState({
      verify: e.target.value,
    });
  }
  sendVerify(){
    if (!this.state.isSendVerify) {
        if (this.state.email !== "") {
          const reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
          if (reg.test(this.state.email)) {
            this.$axios
              .post("/emailValidCode", {
                email: this.state.email,
              })
              .then(() => {
                successToast("发送成功");
                this.setState({
                    isSendVerify:true
                })
                var time = this.state.countDown;
                var timer = setInterval(() => {
                    this.setState({
                        countDown:--time
                    })
                  if (time <= 0) {
                      this.setState({
                        isSendVerify:false,
                        countDown:60
                      })
                    clearInterval(timer);
                  }
                }, 1000);
              });
          } else {
            errorToast("邮箱格式不正确");
          }
        } else {
            errorToast("请填写邮箱");
        }
      }
  }
  GoSubmit() {
    if (
      this.state.phone !== "" &&
      this.state.password !== "" &&
      this.state.email !== "" &&
      this.state.verify !== ""
    ) {
      if (checkPhone(this.state.phone)) {
        if (
          this.state.password.length >= 6 &&
          this.state.password.length <= 16
        ) {
          const reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
          if (reg.test(this.state.email)) {
            this.$axios
              .post("/checkValidCode", {
                validCode: this.state.verify,
              })
              .then((res) => {
                if (res.data.code === "K001") {
                  this.$axios
                    .post("/retrievePassword", {
                      phone: this.state.phone,
                      password: this.state.password,
                    })
                    .then((res) => {
                      successToast(res.data.msg);
                      if (res.data.code === "L001") {
                        this.props.history.push("/login");
                      }
                    });
                } else {
                  errorToast(res.data.msg);
                }
              });
          } else {
            errorToast("邮箱格式不正确");
          }
        } else {
          errorToast("密码长度6-16位");
        }
      } else {
        errorToast("手机号码格式不正确");
      }
    } else {
      errorToast("请填写完整信息！");
    }
  }

  render() {
    return (
      <div className="forgotPassword">
        <Walk>
          <p slot="main">忘记密码！</p>
          <p slot="sub">forgot password!</p>
        </Walk>
        <div className="login_form">
          <Phone
            title="手机号"
            placeholder="请输入手机号"
            ChangePhone={this.ChangePhone}
          ></Phone>
          <Phone
            eye="true"
            title="密码"
            placeholder="密码"
            ChangePhone={this.ChangePassword}
          ></Phone>
          <Phone
            title="邮箱"
            placeholder="邮箱"
            ChangePhone={this.ChangeEmail}
          ></Phone>
          <div className="Email_Verify">
            <span className="text">邮箱验证码</span>
            <input
              type="text"
              placeholder="请输入邮箱验证码"
              onChange={this.ChangeVerify}
            />
            <button className={this.state.isSendVerify ?'sendVerify_active':'sendVerify'} onClick={this.sendVerify}>
            {this.state.isSendVerify ? `${this.state.countDown}s` : "发送验证码"}
          </button>
          </div>
        </div>
        <div className="login_forget">
          <span  onClick={this.ToLogin}>已有账号，立即登录</span>
        </div>
        <div className="login_btn">
          <button onClick={this.GoSubmit}>提交</button>
        </div>
      </div>
    );
  }
}

export default withRouter(ForgotPassword);
